<template>
    <div class="my_content ">
        <div class="colorFFF " >
            <TitleBar>设备情况</TitleBar>
        </div>
        <div class="bottomPage">
            <div id="second_echarts_device" style="width:50%;height: 100%;"></div>
            <div class="rightDiv">
                <div class="rightNumDiv" v-for="(item,index) in numList" :key="index">
                    <div class="rightLabel">
                        <div class="labelNum">
                            <div class="leftLabel"><div class="circle" :style="'background-color:'+item.color"></div>{{item.label1}}</div>
                            <div>
                                <label class="num">{{item.percentage}}</label>
                                <small>%</small>
                            </div>
                        </div>
                        <div class="labelNum">
                            <div class="leftLabel"><div class="line" :style="'border-color:'+item.color"></div>{{item.label2}}</div>
                            <div>
                                <label class="num">{{item.number}}</label>
                                <small>个</small>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import * as echarts from 'echarts';
import { defineComponent } from 'vue';
import { equipmentStatistics } from "src/api/screenDevice";
import TitleBar from '../components/TitleBar.vue'
import { debounce } from 'lodash';

export default defineComponent({
    components: { TitleBar },
    inject: ['villageId'],
    // props:{
    //         id:{
    //             type:[Number,String],
    //             required:false
    //         }
    //     },
    data() {
        return {
           response:{
                    importantEquipmentMalfunctionSum:'',
                    importantEquipmentNormalSum:'',
                    malfunctionPercentage:'',
                    normalPercentage:'',
                    equipmentSum:''
                },
            numList: [
                {
                    color: '#2CA6FF',
                    label1: '所有设备正常占比',
                    percentage: 0,
                    label2: '重要设备正常总数',
                    number: 0
                },
                {
                    color: '#3DE6C9',
                    label1: '所有设备故障占比',
                    percentage: 0,
                    label2: '重要设备故障总数',
                    number: 0
                }
            ],
            dataList:[
                {
                    name: '所有设备正常占比',
                    value: 0,
                },
                {
                    name: '重要设备正常总数',
                    value: 0,
                },
                {
                    name: '所有设备故障占比',
                    value: 0,
                },
                {
                    name: '重要设备故障总数',
                    value: 0,
                }
            ],
            // villageId: '1002002'
        }
    },
    mounted(){
        this.initEcharts()
        this.setIntervalTotalFn()
    },
    beforeDestroy(){
        clearInterval(this.timer);
        this.timer = null;
        this.myCharts && this.myCharts.dispose();
        // this.numList=[]

    },
    methods:{
        setIntervalTotalFn() {
                const villageId = this.villageId
                if(villageId){
                    this.equipmentStatistics(villageId);
                    this.timer = null;
                    this.timer = setInterval(() => {
                        this.equipmentStatistics(villageId);
                    }, 20000);
                }
            },
            equipmentStatistics(villageId){
                // return
                equipmentStatistics({id: villageId}).then(res=>{
                    if(res.success == true){
                        this.numList[0].percentage = res.data.normalPercentage || 0,
                        this.numList[0].number = res.data.importantEquipmentNormalSum || 0,
                        this.numList[1].percentage = res.data.malfunctionPercentage || 0,
                        this.numList[1].number = res.data.importantEquipmentMalfunctionSum || 0,
                        this.dataList[0].value = res.data.normalPercentage || 0,
                        this.dataList[1].value = res.data.importantEquipmentNormalSum|| 0,
                        this.dataList[2].value = res.data.malfunctionPercentage || 0,
                        this.dataList[3].value = res.data.importantEquipmentMalfunctionSum || 0,
                        this.response.equipmentSum = res.data.equipmentSum || 0,
                        this.initEcharts()
                    }
                })
            },
            // 初始化echarts
            initEcharts() {

                this.myCharts && this.myCharts.dispose()
                var myCharts = echarts.init(document.getElementById('second_echarts_device'));
                
                var data = [];
                var color = ['#2CA6FF', '#BBE2FF', '#3DE6C9', '#3DE6C9'];
                for (const element of this.dataList) {
                    data.push(
                        {
                            value: element.value,
                            name: element.name,
                            itemStyle: {
                                normal: {
                                    borderWidth: 8,
                                    shadowBlur: 20,
                                    borderRadius: 20, // 圆角
                                    //borderColor: color[i],
                                    //shadowColor: color[i],
                                },
                            },
                        }
                    );
                    if (element.value) {
                        data.push({
                            value: 5,
                            name: '',
                            tooltip: {
                                show: false,
                            },
                            itemStyle: {
                                normal: {
                                    color: 'rgba(0,0,0,0)'
                                },
                            },
                        })
                    }
                }
                let option = {
                    // graphic:{ //圆形中间图片
                    //     elements:[{
                    //         type:"image",
                    //         style:{
                    //             image:"./assets/deviceBg.jpg",
                    //             width:100,
                    //             height:100
                    //         },
                    //         left:"center",
                    //         top:"center",
                    //     }]
                    // },
                    title: {
                        zlevel: 0,
                        text: ['{value|'+this.response.equipmentSum+'}','{name|设备总数}'].join('\n'),
                        top: 'center',
                        left: '48%',
                        textAlign: 'center',
                        textStyle: {
                            rich: {
                                name: {
                                    color: '#E1F7FF',
                                    fontSize: 14,
                                    lineHeight: 20
                                },
                                value: {
                                    color: '#E1F7FF',
                                    fontWeight: 'bold',
                                    fontSize: 20,
                                    lineHeight: 25
                                }
                            }
                        }
                    },
                    color: color,
                    tooltip: {
                        show: true,
                    },
                    toolbox: {
                        show: false,
                    },
                    series: [
                        {
                            name: '',
                            type: 'pie',
                            radius: [50, 60],
                            hoverAnimation: false,
                            clockWise: false,
                            y: 'center',
                            x: 'left',
                            center: ['50%', '50%'],
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: false,
                                    },
                                },
                            },
                            data: data,
                        },
                    ],
                };
                myCharts.setOption(option);
                const f = debounce(function () {
                    if (myCharts.isDisposed()) {
                        window.removeEventListener('resize',f)
                    } else {
                        myCharts.resize();
                    }
                }, 500)
                window.addEventListener('resize', f)
                this.myCharts = myCharts
            },
        }
})

</script>

<style scoped lang="scss">
    .my_content{
        .bottomPage{
            width: 100%;
            height: 85%;
            display: flex;
            .rightDiv{    
                display: flex;
                flex: 1;
                flex-flow: column;
                height: 90%;
                margin-top: 20px;
                .rightNumDiv{
                    display: flex;
                    flex: 1;
                    justify-content: space-around;
                    .rightLabel{
                        display: flex;
                        flex-flow: column;
                        justify-content: space-around;
                        flex: 1;
                        max-height: 100px;
                        .labelNum{
                            color: rgba(225, 247, 255, 0.8);
                            font-size: 14px;
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            .leftLabel{
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                
                            }
                            .circle{
                                width: 12px;
                                height: 12px;
                                border-radius: 10px;
                                background-color: white;
                                margin-right: 8px;
                            }
                            .line{
                                width: 11px;
                                height: 25px;
                                margin-left: 5px;
                                border: 1px solid;
                                border-top: 0px;
                                border-right: 0px;
                                margin-top: -30px;
                                margin-right: 8px;
                                border-color:#ffffff #ffffff #BCFFF4 #3DE6C9;
                            }
                            .num{
                                color: #E1F7FF;
                                font-size: 20px;
                                letter-spacing: 1px;
                                text-shadow: 0px 0px 6px rgba(255, 255, 255, 0.4);

                            }
                        }
                    }
                }
            }
            #second_echarts_device{
                background: url("./assets/deviceBg.png") center/34% no-repeat;
            }
        }
    }
</style>